import Qt 4.7

Rectangle {
    id: sideMenuButton

    width: 82; height: 61
    color: "#00adef"
    radius: 5

    property string icon: ""
    property string text: ""
    property real fixedX: 0

    Image {
        id: sideMenuButtonIcon

        source: parent.icon
        anchors { left: parent.left; leftMargin: 8; top: parent.top; topMargin: 8 }
    }

    Text {
        id: sideMenuButtonText

        text: parent.text; color: "white"
        font { family: "Series 60 Sans"; pointSize: 4; weight: Font.DemiBold }
        anchors { left: parent.left; leftMargin: 5; bottom: parent.bottom; bottomMargin: 4 }
    }

    states: [
        State {
            name: "hoverEntered"

            PropertyChanges { target: sideMenuButton; x: fixedX - 80; width: 162 }
        },
        State {
            name: "hoverExited"

            PropertyChanges { target: sideMenuButton; x: fixedX; width: 82 }
        }
    ]

    transitions: [
        Transition {
            NumberAnimation { duration: 100; properties: "width, x" }
        }
    ]
}
